@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  }

  body {
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .prose {
    @apply max-w-none;
  }

  .prose h1 {
    @apply text-3xl font-bold mb-4 mt-6 text-gray-900 dark:text-gray-100;
  }

  .prose h2 {
    @apply text-2xl font-bold mb-3 mt-5 text-gray-900 dark:text-gray-100;
  }

  .prose h3 {
    @apply text-xl font-bold mb-2 mt-4 text-gray-900 dark:text-gray-100;
  }

  .prose p {
    @apply mb-4 leading-relaxed text-gray-700 dark:text-gray-300;
  }

  .prose ul, .prose ol {
    @apply mb-4 pl-6 text-gray-700 dark:text-gray-300;
  }

  .prose li {
    @apply mb-1;
  }

  .prose blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic mb-4 text-gray-600 dark:text-gray-400;
  }

  .prose code {
    @apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono text-gray-800 dark:text-gray-200;
  }

  .prose pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
  }

  .prose img {
    @apply max-w-full h-auto rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-4;
  }

  .prose table {
    @apply w-full border-collapse mb-4;
  }

  .prose th, .prose td {
    @apply border border-gray-300 dark:border-gray-600 px-4 py-2 text-gray-700 dark:text-gray-300;
  }

  .prose th {
    @apply bg-gray-100 dark:bg-gray-800 font-bold;
  }

  .prose a {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300;
  }
}
